<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="keywords" content="select">
  <meta name="description" content="select">
  <title>select</title>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" href="../css/materialdesignicons.min.css">
  <!-- 引入 bootstrap 样式 -->
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
  
  <link rel="stylesheet" type="text/css" href="../css/style.min.css">
  <link rel="stylesheet" type="text/css" href="../css/form.css">
</head>

<body>
  <div class="container-fluid">

    <div class="row">

      <!-- 查询条件 -->
      <div class="col-lg-12 mt-20 search-box">
        <div class="card">
          <div class="card-header">
            <div class="min_title">
              <div class="title_label">数据筛选</div>
            </div>
          </div>
          <div class="card-body">
            <div class="form-box">
              <div class="form-item">
                <div class="form-label">单选：</div>
                <div class="form-con">
                  <div id="demo1" class="xm-select-demo" style="width: 100%;"></div>
                </div>
              </div>

              <div class="form-item">
                <div class="form-label">多选文字、禁用选项：</div>
                <div class="form-con">
                  <div id="demo2" class="xm-select-demo" style="width: 100%;"></div>
                </div>
              </div>

              <div class="form-item">
                <div class="form-label">块显示多选：</div>
                <div class="form-con">
                  <div id="demo3" class="xm-select-demo" style="width: 100%;"></div>
                </div>
              </div>

              <div class="form-item">
                <div class="form-label">大小：</div>
                <div class="form-con">
                  <div id="demo4" class="xm-select-demo" style="width: 100%;"></div>
                </div>
              </div>

              <div class="form-item">
                <div class="form-label">级联选择：</div>
                <div class="form-con">
                  <div id="demo5" class="xm-select-demo" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
  <script type="text/javascript" src="../js/xm-select.js"></script>
  <script type="text/javascript">

    // 示例文档
    // https://maplemei.gitee.io/xm-select/#/basic/hiddenIcon
    $(document).ready(function () {
      var demo1 = xmSelect.render({
        el: '#demo1',
        tips: '请选择人员',
        radio: true, // 是否开启单选
        clickClose: true, // 是否在选择完毕之后关闭下拉菜单
        theme: {
          color: '#409eff',
        },
        model: {
          icon: 'hidden',
          label: {
            type: 'text',
            block: {
              //最大显示数量, 0:不限制
              showCount: 0,
              //是否显示删除图标
              showIcon: false,
            }
          }
        },
        data: [
          { name: '张三', value: 1 },
          { name: '李四', value: 2 },
          { name: '王五', value: 3 },
        ]
      })

      var demo2 = xmSelect.render({
        el: '#demo2',
        // radio: true,
        // clickClose: true,
        theme: {
          color: '#409eff',
        },
        model: {
          icon: 'hidden',
          label: {
            type: 'text'
          }
        },
        data: [
          { name: '张三1', value: 1, selected: true },
          { name: '李四1', value: 2 },
          { name: '王五1', value: 3, disabled: true },
          { name: '苹果2', value: 4 },
        ]
      })

      var demo3 = xmSelect.render({
        el: '#demo3',
        theme: {
          color: '#409eff',
        },
        model: {
          icon: 'hidden',
          label: {
            type: 'block'
          }
        },
        data: [
          { name: '张三1', value: 1 },
          { name: '李四1', value: 2 },
          { name: '王五1', value: 3 },
          { name: '苹果2', value: 4 },
        ]
      })

      var demo4 = xmSelect.render({
        el: '#demo4',
        size: 'mini',
        theme: {
          color: '#409eff',
        },
        model: {
          icon: 'hidden',
          label: {
            type: 'block',
            block: {
              //最大显示数量, 0:不限制
              showCount: 1,
              //是否显示删除图标
              showIcon: true,
            }
          }
        },
        data: [
          { name: '张三1', value: 1 },
          { name: '李四1', value: 2 },
          { name: '王五1', value: 3 },
          { name: '苹果2', value: 4 },
        ]
      })


      var demo5 = xmSelect.render({
        el: '#demo5',
        // autoRow: true,
        cascader: {
          show: true,
          indent: 200,
        },
        height: '200px',
        data: function() {
          return [
            {
              name: '销售员', value: -1, children: [
                { name: '张三1', value: 1, children: [] },
                { name: '李四1', value: 2 },
                { name: '王五1', value: 3 },
              ]
            },
            {
              name: '奖品', value: -2, children: [
                {
                  name: '奖品3', value: -3, children: [
                    { name: '苹果3', value: 14 },
                    { name: '香蕉3', value: 15 },
                    { name: '葡萄3', value: 16 },
                  ]
                },
                { name: '苹果2', value: 4 },
                { name: '香蕉2', value: 5 },
                { name: '葡萄2', value: 6 },
              ]
            },
          ]
        }
      })

    })
  </script>
</body>

</html>